<template>
  <section class="granttwol-upload">
    <el-dialog v-el-drag-dialog :close-on-click-modal="false" :visible.sync="visible" title="上传文件" center width="500px" @close="handleCancel()">
      <el-upload
        ref="upload"
        v-loading="loading"
        element-loading-text="正在上传请稍后"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :auto-upload="false"
        :on-success="onsuccess"
        :on-error="onerror"
        :action="upload.action"
        :headers="uploadHeaders"
        :data="uploadData"
        accept=".xls, .xlsx"
        drag
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div slot="tip" class="el-upload__tip">
          只能上传.xls,.xlsx
          <!-- <span @click="handleDownload">下载模板</span> -->
        </div>
      </el-upload>
      <section style="display: flex; align-items: center; margin-top: 10px;">
        每人定向发放金额：
        <!-- <el-input-number v-model="" :min="-1" /> -->
        <el-input v-model="uploadData.giveNumber" style="flex:1;" oninput="value=value.replace(/^\.+|[^\d.-]/g,'')" @blur="myBlur" />
      </section>
      <section style="font-size: 12px; color: #999; line-height: 40px;">
        <i class="el-icon-warning-outline" />如果设置固定发放金额，则以此固定发放金额为准。（-1为不设置）
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">取 消</el-button>
        <el-button style="padding: 8px 30px;" type="primary" @click="handleComit()">确认</el-button>
      </span>
    </el-dialog>
  </section>
</template>
<script>
import elDragDialog from '@/directive/el-drag-dialog'
import permission from '@/directive/permission/index.js'
import { importSign } from '@/utils/fileImportOrExportSign'
import { getToken } from '@/utils/auth'
export default {
  name: 'GrantUpload',
  directives: { permission, elDragDialog },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      uploadHeaders: { 'ttsxyhcs': getToken() },
      uploadData: {
        giveId: this.id,
        giveNumber: '-1'
      },
      upload: {
        action: '/API-ENTERPRISE-BACKEND/backend/giveInfoDetail/giveInfoDetailImport'
      }
    }
  },
  created() {
    this.visible = true
  },
  methods: {
    myBlur(e) {
      this.uploadData.giveNumber = e.target.value
    },
    handleComit() {
      this.$set(this, 'uploadHeaders', importSign(this.uploadHeaders, this.uploadData))
      this.loading = true
      this.$refs.upload.submit()
    },

    handleCancel() {
      this.$emit('cancel')
    },

    onsuccess(data) {
      this.loading = false
      if (data.code === '200') {
        this.$message({
          message: '导入成功',
          type: 'success'
        })
        this.visible = false
        this.$refs.upload.clearFiles()
        this.$emit('success')
      } else {
        this.$message.error('导入失败，详细信息请查看错误信息文件')
        this.$refs.upload.clearFiles()
        if (data.data && data.data.uuid) {
          setTimeout(() => {
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = '/API-ENTERPRISE-BACKEND/backend/giveInfoDetail/giveInfoDetailImportDownload?uuid=' + data.data.uuid
            link.setAttribute('download', '错误信息.xls')
            link.setAttribute('target', '_blank')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }, 1000)
        } else if (data.msg) {
          this.$message.error(data.msg)
        }
      }
    },

    onerror(err) {
      this.loading = false
      this.$message.error(err.msg || '网络异常')
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/mixin.scss';
.granttwol-upload {
  .el-upload {
    width: 100%;
    .el-upload-dragger {
      width: 100%;
    }
  }

  .el-upload__tip {
    > span {
      display: inline-block;
      @include font-color($mainColor);
      font-size: 14px;
      float: right;
      text-decoration: underline;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
